<link href="/src/style/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
var jQuery = layui.$
</script>
<script src="/src/lib/select2.min.js"></script>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">首页</a>
    <a><cite>网站管理</cite></a>
    <a><cite>统计分析</cite></a>
    <a><cite>攻击排行</cite></a>
  </div>
</div>
<style type="text/css">
.select2-container .select2-selection--multiple {min-height: 30px;}
.layui-card-body  {line-height: 18px;}
.active-btn {
  border: 1px solid #009688 ! important;
  color: #009688
}
.select2-container .select2-search--inline .select2-search__field {padding-left: 5px;}
</style>

<div class="layui-fluid" id="component-tabs">
  <div class="layui-row">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="layui-tab layui-tab-brief" lay-filter="attack-rank-tab">
            <ul class="layui-tab-title">
              <li class="layui-this">攻击次数</li>
              <li>黑名单数量</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-row layui-col-space15">
                <div class="layui-col-lg4 layui-col-md6">
                  <div class="layui-btn-group recent-time-group">
                    <button type="button" data-minute=10m class="layui-btn layui-btn-primary recent_time layui-btn-sm active-btn">10分钟实时</button>
                    <button type="button" data-minute=30m class="layui-btn layui-btn-primary recent_time layui-btn-sm ">近30分钟</button>
                    <button type="button" data-minute=60m class="layui-btn layui-btn-primary recent_time layui-btn-sm ">近1小时</button>
                  </div>
                  <button id="reload" type="button" class="layui-btn layui-btn-sm">刷新</button>
                </div>
              </div>               
              <div class="layui-tab-item layui-show">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-lg6 layui-col-md12">
                      <table id="top-domain-cc" lay-filter="top-domain-cc"></table>
                    </div>
                  </div>
              </div>
              <div class="layui-tab-item">
                  <div class="layui-row layui-col-space15">
                    <div class="layui-col-lg6 layui-col-md12">
                      <table id="top-domain-black" lay-filter="top-domain-black"></table>
                    </div>
                  </div>
              </div>              
            </div>
          </div>
        </div>
      </div>

   </div>
</div>

<script>
layui.use(['admin','table'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element;

  admin.on('hash(attack-rank)', function(router){
    clearInterval(window.attack_rank)
  });

  $("#reload").click(function (argument) {
    render_table()
  })

  function render_attack_table (argument) {
    $(".recent-time-group").removeClass("layui-hide")
    //最近时间
    var recent_time = $(".active-btn").data("minute")

    admin.req({
      url: '/monitor/site/top?recent_time='+recent_time+'&type=top-domain&cc=1'
      ,type: "get"
      ,done: function(res){
        var data = res.data
        table.render({
          elem: '#top-domain-cc'
          ,cols: [[
            {title:'排行',type: "numbers"}
            ,{field:'res', title:"攻击域名"}
            ,{field:'count', title:'攻击次数',width:120}
            ,{field:'traffic', title:'攻击流量',width:120,templet:function (d) {
                var v = d.traffic / 1024
                if (v >= 921.6) {
                  var t = (v / 1024).toFixed(2) + " MB" 
                } else {
                  var t = v.toFixed(2) + " KB"
                }
                return t
            }}
          ]]
          ,data: data
          ,page: true
          ,limit: 20
        });  
     
      }
    }); 
  }

  function render_black_table (argument) {
    $(".recent-time-group").addClass("layui-hide")
    admin.req({
      url: '/monitor/site/blackip-count'
      ,type: "get"
      ,done: function(res){
        var data = res.data
        table.render({
          elem: '#top-domain-black'
          ,cols: [[
            {title:'排行',type: "numbers"}
            ,{field:'site_id', title: "网站ID"}
            ,{field:'count', title:'黑名单数量',width:120}
          ]]
          ,data: data
          ,page: false
          ,limit: 100
        });  
     
      }
    }); 
  }

  function render_table() {
    // 清理定时
    var attack_rank = window.attack_rank
    if (typeof(attack_rank) != "undefined") {
      clearInterval(attack_rank)
    }

    //类型
    var curr_tab = $(".layui-tab-title .layui-this").text()
    if (curr_tab == "攻击次数") {
      render_attack_table()
    } else if (curr_tab == "黑名单数量") {
      render_black_table()
    }
  }

  render_table()

  element.on('tab(attack-rank-tab)', function(data){
    render_table()
  });

  $(".recent_time").click(function (argument) {
    $(".recent_time").removeClass("active-btn")
    $(this).addClass("active-btn")
    render_table()
  })


});  
</script>
